<template>
	<div class="siteList" :class="this.$store.getters.isIphoneX ? 'pad-top80' : 'pad-top'">
		<back-header title="选择收货地址"></back-header>
		<div class="siteList-warp">
			<div class="siteList-box">
				<app-loading v-if="!UserAddress"></app-loading>
				<div v-else-if="UserAddress.length == 0" style="text-align: center;padding:100px 0;font-size:16px;color:#555;">暂无收货地址</div>
				<div v-else class="siteList-item" v-for="item in UserAddress" >
					<div :data-id="item.address_id" class="confirmAddress" @click="yesAddress(item)">
						<div class="inline-block text-row2">
							收货人：<span class="data_name">{{item.name}}</span>
						</div>
						<div class="inline-block text-row2">
							联系方式：<span class="data_phone">{{item.phone}}</span>
						</div>
						<div class="inline-block text-row2">
							收货地区：<span class="data_region">{{item.region}}</span>
						</div>
						<div class="inline-block text-row2">
							收货地址：<span class="data_address">{{item.address}}</span>
						</div>
					</div>
					<div class="addrss-tool">
						<a href="javascript:;" class="tool-edit addressSave" :data-id="item.address_id" @click="goSavesite(item.address_id)"><img src="../assets/images/edit.png">编辑</a>
						<a href="javascript:;" class="tool-del"  @click="addressDel(item.address_id)"><img src="../assets/images/del.png">删除</a>
					</div>
				</div>
			</div>
			<button v-if="UserAddress" class="btn btn-green" @click="go([$router,'Addsite'])">
	            添加收货地址
	            <img class="icon-img" src="../assets/images/tianjiadizhi.png">
	        </button>
		</div>
	</div>
</template>

<script type="text/javascript">
	import { mapMutations } from 'vuex'
	import appLoading from '../components/loading'
	import backHeader from '../components/backHeader'
	export default{
		name:"siteList",
		components:{backHeader,appLoading},
		data(){
			return {
				UserAddress:"",
			}
		},
		mounted(){
			this.getUserAddress();
		},
		methods:{
			...mapMutations([
				'go'
			]),
			getUserAddress:function(){
		        this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/address/getUserAddress`,{token:this.$store.state.userInfo.token}).then((response) => {
		              console.log(response)
		              this.UserAddress = response.data;
		  		 })
		    },
		    yesAddress(address){
		    	this.$store.state.address = address;
		    	 console.log(this.$store.state.address)
		    	this.$router.go(-1);
		    },
		    goSavesite(address_id){
		    	this.$router.push({path:"/Savesite",query:{address_id:address_id}});
		    },
		    addressDel(address_id){
		    	if(!confirm('确认要删除吗？')){
					return;
				}
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/V1/address/deleteUserAddress`,{token:this.$store.state.userInfo.token,addressId:address_id}).then((response) => {
		              console.log(response)
		              if(response.code == "0"){
		              		alert('删除成功');
		              		this.getUserAddress();
		              }else{
		              		alert('删除失败');
		              }
		  		 })
		    }
		}
	}
</script>

<style lang="less" scoped>

	.btn .icon-img {
	    width: 20px;
	    vertical-align: bottom
	}
	.siteList{
		width:100%;
		height:100%;
		background:#fff;
	}
	.siteList-warp .siteList-item {
	    padding: 20px 10px;
	    background: #fff;
	    margin: 10px 0;
	    border-bottom: 8px solid #eee;
	}
	.siteList-warp .siteList-item>div {
	    width: 100%;
	    cursor: pointer;
	    font-size:14px;
	}
	.text-row2 {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	}
	.siteList-warp .siteList-item>div.addrss-tool {
	    text-align: right;
	    margin-top: 10px;
	}
	.siteList-warp .addrss-tool>a {
	    margin-right: 10px;
	    color: #999
	}

	.siteList-warp .addrss-tool>a>img {
	    width: 18px;
	    margin-right: 2px;
	}
</style>